<template>
  <div class="app-container">
    <div class="view-title">首页</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="新增用户" name="newUser" />
      <el-tab-pane label="活跃用户" name="activeUsers" />
      <el-tab-pane label="标签数据" name="userData" />
      <el-tab-pane label="订单数据" name="orderData" />
      <el-tab-pane label="分销统计" name="saleData" />
      <div>
        <component :is="curTabComponents[activeName]" />
      </div>
    </el-tabs>
  </div>
</template>
<script>
import activeUsers from "./components/activeUsers.vue";
import newUser from "./components/newUser.vue";
import userData from "./components/userData.vue";
import orderData from "./components/orderData.vue";
import saleData from "./components/saleData.vue";

export default {
  components: {
    activeUsers,
    newUser,
    userData,
    orderData,
    saleData
  },
  data() {
    return {
      activeName: "newUser",
      curTabComponents: {
        activeUsers: "activeUsers",
        newUser: "newUser",
        userData: "userData",
        orderData: "orderData",
        saleData: "saleData",
      },
    };
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
    },
  },
};
</script>
<style lang="scss" scoped></style>
